<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>definePrototype</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click.stop="message = 123">change</button>
        <p>{{message}}</p>
        <button @click.stop="miaov.ketang.a = 123">change</button>
        <p>{{miaov.ketang.a}}</p>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'Hello, miaoV',
                miaov:{
                    ketang:{
                        a:1,
                    }
                }
            },
            methods:{
                change(){
                }
            },
            watch:{
                message(newValue,oldValue){
                    console.log(newValue,oldValue);
                },
                'miaov.ketang.a'(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        })
        // 观察
        // 第一个参数 是监控的属性名， 第二个是个回调函数 
        // vm.$watch('message',function(newValue,oldValue){
        //     console.log(newValue,oldValue);
        // })

        // '浅'监控
        // vm.$watch('miaov.ketang.a',function(newValue,oldValue){
        //     console.log(newValue,oldValue);
        // })
    </script>
</body>
</html>